{% extends "base.html" %}
{% block content %}

<h3>📦 所有已售出订单</h3>

<!-- 搜索表单 -->
<form method="get" action="{% url 'sold_orders_all' %}" class="mt-4 mb-4">
    <div class="input-group">
        <input type="text" name="q" value="{{ query }}" class="form-control" placeholder="请输入商品名称或顾客姓名进行搜索...">
        <button class="btn btn-outline-secondary" type="submit">搜索</button>
    </div>
</form>

<div class="table-responsive">
    <table class="table table-hover align-middle">
        <thead class="table-light">
            <tr>
                <th>顾客姓名</th>
                <th>商品名称</th>
                <th>商品图片</th>
                <th>下单时间</th>
                <th>订单状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% if orders %}
                {% for order in orders %}
                    <tr>
                        <td>{{ order.user.username }}</td>
                        <td>{{ order.product.product_name }}</td>
                        <td>
                            {% if order.product.product_image %}
                                <img src="{{ order.product.product_image.url }}" alt="商品图片" width="60" class="rounded">
                            {% else %}
                                <span class="text-muted">无图片</span>
                            {% endif %}
                        </td>
                        <td>{{ order.created_at|date:"Y-m-d H:i:s" }}</td>
                        <td><span class="badge bg-success">{{ order.get_status_display }}</span></td>
                        <td>
                            <a href="{% url 'order_details' order_id=order.id %}" class="btn btn-sm btn-outline-secondary">查看详情</a>
                        </td>
                    </tr>
                {% endfor %}
            {% else %}
                <tr>
                    <td colspan="6" class="text-center text-muted">暂无匹配的订单。</td>
                </tr>
            {% endif %}
        </tbody>
    </table>
</div>
<!-- 分页导航 -->
<nav aria-label="Page navigation" class="mt-4">
    <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
        <li class="page-item">
            <a class="page-link" href="?q={{ query }}&page=1">&laquo;</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="?q={{ query }}&page={{ page_obj.previous_page_number }}">前一页</a>
        </li>
        {% endif %}

        {% for i in page_obj.paginator.page_range %}
        <li class="page-item {% if page_obj.number == i %}active{% endif %}">
            <a class="page-link" href="?q={{ query }}&page={{ i }}">{{ i }}</a>
        </li>
        {% endfor %}

        {% if page_obj.has_next %}
        <li class="page-item">
            <a class="page-link" href="?q={{ query }}&page={{ page_obj.next_page_number }}">下一页</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="?q={{ query }}&page={{ page_obj.paginator.num_pages }}">&raquo;</a>
        </li>
        {% endif %}
    </ul>
</nav>


{% endblock %}
